<template>
  <el-row id="tag-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>
    <el-row>
      <el-row id="auditButton-box">
        <el-button
          id="auditButton"
          class="buttonStyle1"
          type="success"
          @click="addTagButton()"
          >新增标签</el-button
        >
        <el-button
          id="auditButton"
          class="buttonStyle1"
          type="success"
          @click="auditTagButton()"
          >标签审核</el-button
        >
      </el-row>
      <el-table
        id="tag-table"
        :data="tagList"
        style="width: 100%"
        height="520"
        :header-cell-style="{ background: '#fafafa' }"
      >
        <el-table-column label="序号" type="index" width="90"> </el-table-column>
        <el-table-column prop="parentTagName" label="父标签" width="350">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名" width="400">
          <template slot-scope="scope">
            <div :style="{'color':scope.row.tagColour}">
              {{ scope.row.tagName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <!-- <template slot="header" :slot-scope="scope">
            <el-button
              id="auditButton"
              class="buttonStyle1"
              type="success"
              @click="addTagButton()"
              >新增标签</el-button
            >
          </template> -->
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="updateTagButton(scope.row)"
              >修改</el-button
            >
            <el-button type="primary" size="mini" @click="goRoute({name:'tagValue',params:{tag:scope.row}})">编辑标签值</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="deleteTagButton(scope.row.tagId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog id="tagUpdateForm" title="标签修改" :visible.sync="updateDialogFormVisible">
        <el-form :model="tagUpdateForm">
          <el-form-item label="标签名">
            <el-input v-model="tagUpdateForm.tagName" placeholder="请输入标签名"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="父标签">
                <el-col :span="10">
                  <div class="block">
                    <el-cascader
                      v-model="tagUpdateForm.parentTagId"
                      :options="tagChoiceList"
                      :show-all-levels="false"
                      clearable
                      :props="{label:'tagName',value:'tagId',children:'children',checkStrictly: true,emitPath: false,expandTrigger: 'hover'}"
                    >
                      <!-- <template slot-scope="{ node, data }">
                        <span>{{ data.tagName }}</span>
                        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                      </template> -->
                    </el-cascader>
                  </div>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="颜色">
                <el-col :span="10">
                  <el-color-picker
                    v-model="tagUpdateForm.tagColour"
                    :predefine="predefineColors">
                  </el-color-picker>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateTag">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog id="tagAddForm" title="标签添加" :visible.sync="addDialogFormVisible">
        <el-form :model="tagAddForm">
          <el-form-item label="标签名">
            <el-input v-model="tagAddForm.tagName" placeholder="请输入标签名"></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="父标签">
                <el-col :span="10">
                  <div class="block">
                    <el-cascader
                      v-model="tagAddForm.parentTagId"
                      :options="tagChoiceList"
                      :show-all-levels="false"
                      clearable
                      :props="{label:'tagName',value:'tagId',children:'children',checkStrictly: true,emitPath: false,expandTrigger: 'hover'}"
                    >
                    </el-cascader>
                  </div>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="颜色">
                <el-col :span="10">
                  <el-color-picker
                    v-model="tagAddForm.tagColour"
                    :predefine="predefineColors">
                  </el-color-picker>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelAdd">取 消</el-button>
          <el-button type="primary" @click="addTag">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog id="tagAuditList" title="标签审核列表" :visible.sync="auditDialogFormVisible">
        <el-table
          id="tag-table"
          :data="tagAuditList"
          style="width: 100%"
          height="400"
          :header-cell-style="{ background: '#fafafa' }"
        >
          <el-table-column label="序号" type="index" width="90"> </el-table-column>
          <el-table-column prop="tagName" label="标签名" width="150">
            <template slot-scope="scope">
              <div :style="{'color':scope.row.tagColour}">
                {{ scope.row.tagName}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="parentTagName" label="父标签" width="150">
            <template slot-scope="scope">
              <div :style="{'color':scope.row.tagColour}">
                {{ scope.row.parentTagName}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="250">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="auditTag(scope.row.tagId)"
                >通过审核</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="sendBackAudit(scope.row.tagId)"
                >不通过审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-row>
  </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb';
import { mapState } from 'vuex'
export default {
  name: "Tag",
  components: {
    Breadcrumb,
  },
  data(){
    return{
      breadcrumb:[
        {name:"标签管理",path:"tag"},
        {name:"所有标签",path:""},
      ],
      updateDialogFormVisible: false,
      addDialogFormVisible: false,
      auditDialogFormVisible:false,
      tagList:[],
      tagUpdateForm:{
        tagName:'',
        parentTagId:'',
        tagColour:''
      },
      tagAddForm:{
        tagName:'',
        parentTagId:'',
        tagColour:''
      },
      tagAuditList:{
        tagName:'',
        parentTagId:'',
        tagColour:''
      },
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
      ],
      tagToTreeList:[
      ],
      tagChoiceList:[],
    }
  },
  methods:{
    getTag(courseId){
      this.axios.get("/tag/"+courseId)
        .then(response => {
          if(response.status == 200){
              this.tagList = response.data.data;
          }
          console.log(this.tagList)
      }).catch(error => alert(error));
    },
    goRoute(location){
      console.log(this)
      this.$router.push(location)
    },
    updateTagButton(row){
      console.log(row)
      this.updateDialogFormVisible = true
      this.tagUpdateForm=Object.assign({},row)//浅拷贝，row是对象的地址
    },
    updateTag(){
      if(!this.checkUpdateForm())
        return;
      
      console.log(this.tagUpdateForm)
      this.axios.post("/tag/update",this.tagUpdateForm)
        .then(response => {
            if(response.status == 200){
                this.hintMessage("修改标签成功")
                this.refreshProblemList()
            }else{
                alert("status:"+response.status)
            }
        })
      .catch(error => alert(error));
      this.updateDialogFormVisible = false
    },
    hintMessage(value){
      this.$message({
        showClose: true,
        message: value,
        type: 'success'
      });
    },
    refreshProblemList(){
      this.getTag(this.course.courseId)
      this.getTagAuditList()
      this.getTagToTreeList()
    },
    deleteTagButton(tagId){
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteTag(tagId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    deleteTag(tagId){
      this.axios.post("/tag/delete",{tagId})
        .then(response => {
            if(response.status == 200){
                this.hintMessage("删除标签成功")
                this.refreshProblemList()
            }else{
                alert("status:"+response.status)
            }
        })
      .catch(error => alert(error));
    },
    sendBackTag(tagId){
      this.axios.post("/tag/delete",{tagId})
        .then(response => {
            if(response.status == 200){
                this.$message({
                  showClose: true,
                  message: "标签审核已不通过",
                  type: 'warning'
                });
                this.refreshProblemList()
            }else{
                alert("status:"+response.status)
            }
        })
      .catch(error => alert(error));
    },
    addTagButton(){
      this.addDialogFormVisible = true
    },
    addTag(){
      if(!this.checkForm())
        return;

      this.axios.post("/tag/add",{
        tagName:this.tagAddForm.tagName,parentTagId:this.tagAddForm.parentTagId,courseId:this.course.courseId,tagColour:this.tagAddForm.tagColour})
      .then(response => {
          if(response.status == 200){
              this.hintMessage("添加标签成功")
              this.refreshProblemList()
          }else{
              alert("status:"+response.status)
          }
      })
      .catch(error => alert(error));
      this.addDialogFormVisible = false
      this.tagAddForm={}
    },
    auditTagButton(){
      this.auditDialogFormVisible = true
    },
    getTagAuditList(){
      this.axios.get("/tag/auditList/"+this.course.courseId)
      .then(response => {
          if(response.status == 200){
              this.tagAuditList = response.data.data;
          }else{
              alert("status:"+response.status)
          }
      })
      .catch(error => alert(error));
    },
    auditTag(tagId){
      this.axios.post("/tag/audit",{tagId:tagId})
      .then(response => {
          if(response.status == 200){
              this.hintMessage("标签审核成功")
              this.refreshProblemList()
          }else{
              alert("status:"+response.status)
          }
      })
      .catch(error => alert(error));
      this.auditDialogFormVisible = false
    },
    sendBackAudit(tagId){
      this.sendBackTag(tagId)
      this.auditDialogFormVisible = false
    },
    cancelAdd(){
      this.addDialogFormVisible = false
      this.tagAddForm={}
    },
    checkForm(){
      if(!this.tagAddForm.tagName){
          this.$message.error('标签名不能为空！');
          return false;
      }
      return true;
    },
    checkUpdateForm(){
      if(!this.tagUpdateForm.tagName){
          this.$message.error('标签名不能为空！');
          return false;
      }
      return true;
    },
    getTagToTreeList(){
      this.axios.get("/tag/toTreeList/"+this.course.courseId)
      .then(response => {
          if(response.status == 200){
              this.tagToTreeList = response.data.data;
              this.toTree(this.tagToTreeList)
          }else{
              alert("status:"+response.status)
          }
      })
      .catch(error => alert(error));
    },
    toTree(data){
      var res = [];
      var map = [];
      if(data){
        data.forEach(item => {
          map[item.tagId] = item;
        });

        data.forEach(item => {
          let parent = map[item.parentTagId];
          if(parent){
            (parent.children || (parent.children = []) ).push(item)
          }else{
            res.push(item);
          }
        })
        this.tagChoiceList = res;
      }
    }
  },
  created(){
      this.getTag(this.course.courseId)
      this.getTagAuditList()
      this.getTagToTreeList()
  },
  computed:{
    ...mapState('course', {
        course:'course',
    }),
  },
};
</script>
<style scoped>
/* 自定义的样式 */
#tag-box{
  padding-top: 20px;
  width: 100%;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  background-color: #f6fafb !important;
}
.buttonStyle1 {
    /* width: 100px; */
    width: auto;
    height: 30px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
#auditButton-box{
  text-align: right;
  margin-right: 30px;
  margin-bottom: 20px;
}
</style>

<style>
/* 修改element-ui的样式 */
#tag-box .cell {
  color: #000000;
  text-align: center;
  font-weight: 500;
}
</style>